<template>
	<view class="page">
		<view class="evaluate_shop">
			<view class="evaluate_shop_thumb">
				<image src="../../../static/img/1.jpg" mode="widthFix"></image>
			</view>
			<view class="evaluate_shop_text">
				<view class="title">开锁换锁</view>
				<view class="title order_num">订单编号：202006087890911</view>
			</view>
		</view>
		<view class="rate">
			<text class="title">服务质量：</text>
			<uni-rate class="pingfen"  max="5" size="25" activeColor="#fe6a6a" :value="2" @change="handleRate"></uni-rate>
			<text class="rate_status">很好</text>
		</view>
		<view class="evaluate_container">
			<textarea class="evaluate_text" placeholder="服务满足您的期待吗？说说您的心得，分享给想买的他们吧"></textarea>
		</view>
		<view class="evaluate_image">
			<view class="ul">
				<view class="li">
					<view class="li_image">
						<image src="../../../static/img/1.jpg" mode="widthFix"></image>
					</view>
					<uni-icons class="position_icon" type="clear" size="16" color="#565656"></uni-icons>
				</view>
				<view class="li">
					<view class="li_image">
						<image src="../../../static/img/1.jpg" mode="widthFix"></image>
					</view>
					<uni-icons class="position_icon" type="clear" size="16" color="#565656"></uni-icons>
				</view>
				<view class="li">
					<view class="li_image">
						<image src="../../../static/img/1.jpg" mode="widthFix"></image>
					</view>
					<uni-icons class="position_icon" type="clear" size="16" color="#565656"></uni-icons>
				</view>
				<view class="li">
					<view class="li_image">
						<image src="../../../static/img/1.jpg" mode="widthFix"></image>
					</view>
					<uni-icons class="position_icon" type="clear" size="16" color="#565656"></uni-icons>
				</view>
				<view class="li">
					<view class="li_image">
						<image src="../../../static/img/1.jpg" mode="widthFix"></image>
					</view>
					<uni-icons class="position_icon" type="clear" size="16" color="#565656"></uni-icons>
				</view>
				<view class="up_li fl vCenter">
					<image src="../../../static/img/upImg.png"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uniRate from '@/components/uni-ui/uni-rate/uni-rate.vue';
	export default {
		components: {
			uniRate
		},
		data() {
			return {
				
			}
		},
		methods: {
			handleRate (e) {
				console.log(e)
			}
		}
	}
</script>
<style>
	page {
		background: #fff;
	}
</style>
<style lang="scss" scoped>
	.page {
		padding: 33rpx;
		.evaluate_shop {
			display: flex;
			margin-bottom: 33rpx;
			.evaluate_shop_thumb {
				flex: 0 0 100rpx;
				width:100rpx;
				height:100rpx;
				margin-right: 33rpx;
				border-radius:8rpx;
				overflow: hidden;
				image {
					width: 100%;
					min-height: 100%;
				}
			}
			.evaluate_shop_text {
				flex: 1;
				position: relative;
				height: 100rpx;
				.title {
					position: absolute;
					left: 0;
					top: 0;
					line-height: 100%;
					font-size: 36rpx;
					color: #565656;
				}
				.order_num {
					position: absolute;
					left: 0;
					top: auto;
					bottom: 0;
				}
			}
		}
		.rate {
			display: inline-block;
			height: 50rpx;
			margin-bottom: 40rpx;
			line-height: 50rpx;
			font-size: 50rpx;
			.title {
				font-size: 36rpx;
				color: #565656;
			}
			.rate_status {
				padding-left: 40rpx;
				font-size: 32rpx;
				color: #B3B3B3;
			}
			.pingfen {
				display: inline-block;
			}
		}
		.evaluate_container {
			width:683rpx;	
			height:220rpx;
			padding: 17rpx;
			margin-bottom: 33rpx;	
			border:1px solid rgba(226,226,226,1);
			box-sizing: border-box;
			textarea {
				width: 100%;
				height: 100%;
				font-size: 32rpx;
				color: #B3B3B3;
			}
		}
		.evaluate_image {
			.ul {
				.li {
					position: relative;
					float: left;
					margin-right: 25rpx;
					margin-bottom: 25rpx;
					background:rgba(233,233,233,1);
					.li_image {
						position: relative;
						z-index: 0;
						width:133rpx;
						height:133rpx;
						border-radius:8rpx;
						overflow: hidden;
					}
					image {
						width: 100%;
						min-height: 100%;
					}
					.position_icon {
						position: absolute;
						z-index: 1;
						right: -16rpx;
						top: -16rpx;
					}
				}
				.up_li {
					width:133rpx;
					height:133rpx;
					background:rgba(233,233,233,1);
					border-radius:8rpx;
					overflow: hidden;
					image {
						width: 69rpx;
						height: 69rpx;
					}
				}
			}
		}
	}
</style>